<template>
  <xn-dialog custom-class="create-task-dialog" title="审批记录" :visible.sync="selfVisible" @close="onDialogHide">
    <div class="content">
      <vxe-table :data="tableData" stripe border align="center" height="450" auto-resize>
        <vxe-column type="seq" title="序号" width="60"></vxe-column>
        <vxe-column field="createTime" title="审核时间"></vxe-column>
        <vxe-column field="approvalStatus" title="审核结论" width="100"></vxe-column>
        <vxe-column field="approvalContent" title="审核意见" min-width="230"></vxe-column>
        <vxe-column field="createByName" title="审核人" width="120"></vxe-column>
      </vxe-table>
    </div>
    <div class="footer" slot="footer">
      <el-button size="small" type="default" @click="selfVisible = false">关闭</el-button>
    </div>
  </xn-dialog>
</template>
<script>
import XnDialog from '@com/xnDialog.vue'

export default {
  name: 'ApprovalRecord',
  components: {
    XnDialog,
  },
  props: {
    visible: {
      type: Boolean,
    },
    pageData: {
      type: Array,
    },
  },
  data() {
    return {
      selfVisible: false,
      tableData: [],
    }
  },
  watch: {
    visible(visible) {
      this.selfVisible = visible
      if (visible) {
        this.tableData = [...this.pageData]
      }
    },
  },
  computed: {},
  created() {},
  mounted() {},
  methods: {
    onDialogHide() {
      this.$emit('update:visible', false)
      this.$emit('closed')
    },
  },
}
</script>
<style lang="scss" scoped>
.create-task-dialog {
  ::v-deep &.el-dialog {
    height: auto;
    .content {
      height: 100%;
      .el-form-item__label {
        line-height: 2;
        font-weight: bold;
      }
      .el-form-item__content {
        line-height: 20px;
      }
    }
  }
}
</style>
